<template>
  <div id="user-bar">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F50f41825-d28e-4a13-ac3c-2fd524803adc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712248934&t=b88aae07b4cb533e2b42125b8d4281e1"
      alt=""
    />
    <div class="user-info" style="line-height: 20px">
      <div class="nickname" style="font-size: 18px">@壹壹张</div>
      <div class="desc" style="color: gray; font-size: 14px">
        人生苦短，我爱Python人生苦短，我爱Python人生苦短，我爱Python人生苦短，我爱Python人生苦短，我爱Python人生苦短，我爱Python人生苦短，我爱Python
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#user-bar {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
#user-bar img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin: 10px;
}

#user-bar .user-info{
    margin-top: 10px;
}

#user-bar .user-info .desc {
  width: 270px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出div的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>